<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{name}}商品详情</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab">商品名称：</span>
          <div>{{productName}} </div>
        </div>
        <div class="line">
          <span class="lab">商品图片：</span>
          <div>
            <img :src="productPhoto" class="avatar" alt="tzs" v-if="productPhoto">
            <p v-else>——</p>
          </div>
        </div>
        <div class="line half_line">
          <span class="lab">购买价格：</span>
          <div class="money">{{price?price:0}}元</div>
          <span class="lab">抵押数量：</span>
          <div>{{pledgeNumber?pledgeNumber:0}} </div>
        </div>
        <div class="line half_line">
          <span class="lab">抵押金额：</span>
          <div class="money">{{pledgeMoney?pledgeMoney:0}}元</div>
          <span class="lab">最低购买数：</span>
          <div>{{minNumber?minNumber:0}}</div>
        </div>
        <div class="line half_line" >
          <span class="lab">手上商品总数量：</span>
          <div>{{productNumber?productNumber:0}}</div>
          <span class="lab">历史购买总数：</span>
          <div>{{allNumber?allNumber:0}}</div>
        </div>
        <div class="line half_line" >
          <span class="lab">历史使用总数：</span>
          <div>{{historyNumber?historyNumber:0}}</div>
          <span class="lab">免费赠予的量：</span>
          <div>{{sendNumber?sendNumber:0}}</div>
        </div>
        <div class="line half_line" >
          <span class="lab">可用总数量：</span>
          <div>{{numbers?numbers:0}}</div>
          <span class="lab">授权使用额度：</span>
          <div>{{authNumber?authNumber:0}}</div>
        </div>
        <div class="line half_line" >
          <span class="lab">已使用授权额度：</span>
          <div>{{usedAuthNumber?usedAuthNumber:0}}</div>
          <span class="lab">状态：</span>
          <div :style="'color:'+(proStatus===1?'#67c430':(proStatus===0?'#e60000':'orange'))">
            <p v-for="(item,index) in option" :key="index" v-if="item.id === proStatus">{{item.name}}</p>
          </div>
        </div>

        <div class="line half_line" >
          <span class="lab">是否支付押金：</span>
          <div :style="'color:'+(isPayPledgeMoney==1?'#67c430':'orange')">{{isPayPledgeMoney == 1?'是':'否'}}</div>
        </div>

      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="closePopup(false)">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail } from "@/api/data/user/product";

export default {
  props:['productId','name','option'],
  data(){
    return {
      productName: '',
      pledgeMoney:'',
      proStatus:1,
      productPhoto:'',
      price:'',
      pledgeNumber:1,
      minNumber:0,
      productNumber:0,
      allNumber:'',
      historyNumber:'',
      sendNumber:'',
      numbers:'',
      authNumber: '',
      usedAuthNumber: '',
      isPayPledgeMoney:'',
      loading:false
    }
  },
  mounted() {
    if (this.productId){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      let that = this;
      this.loading = true;
      getDetail(that.productId).then(res => {
        if (res){
          that.setData(res);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    setData(obj) {
      this.productName = obj.productName ? obj.productName : '';
      this.pledgeMoney = obj.pledgeMoney ? obj.pledgeMoney : '';
      this.proStatus = obj.enable ? obj.enable : 0;
      this.productPhoto = obj.productPhoto ? obj.productPhoto : '';
      this.price = obj.price ? obj.price : '';
      this.pledgeNumber = obj.pledgeNumber ? obj.pledgeNumber : 0;
      this.productNumber = obj.productNumber ? obj.productNumber : 0;
      this.minNumber = obj.minNumber ? obj.minNumber : 0;
      this.allNumber = obj.allNumber ? obj.allNumber : 0;
      this.historyNumber = obj.historyNumber ? obj.historyNumber : 0;
      this.sendNumber = obj.sendNumber ? obj.sendNumber : 0;
      this.numbers = obj.numbers ? obj.numbers : 0;
      this.authNumber = obj.authNumber ? obj.authNumber : 0;
      this.usedAuthNumber = obj.usedAuthNumber ? obj.usedAuthNumber : 0;
      this.isPayPledgeMoney = obj.isPayPledgeMoney ? obj.isPayPledgeMoney : 0;
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
}
.money {
  color: #f7ab20
}

.half_line div {
  width: 140px;
}
</style>
